<template>
  <section class="xmv-card xmv-wrap">
    <h4>卡片</h4>
    <div class="demo-markup-source u-letter-box--small c-text">
      <div class="c-card">
        <div class="c-card__item">
          <p class="c-paragraph">这是卡片.</p>
        </div>
      </div>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
          &ltdiv class="c-card"&gt
            &ltdiv class="c-card__item"&gt
              &ltp class="c-paragraph"&gt这是卡片.&lt/p&gt
            &lt/div&gt
          &lt/div&gt
        </code>
      </pre>
    </div>
  </section>
</template>
<style lang="less" scoped>
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
p {
  text-align: left;
  padding: 0.5em 0;
}
.c-code--multiline {
  display: block;
  padding: 0.5em 1em;
  border-radius: 4px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
.demo-markup-source {
  text-align: left;
}
.c-code {
  font-size: 0.8em;
}
</style>